<template>
  <view class="page">
    <view class="title">忘记密码</view>
    <view class="desc">请输入登录账号和验证码找回密码</view>
    <view class="mt-72rpx">
      <view class="mt-33rpx">
        <u-input
          v-model="formData.username"
          :prefix-icon="phone"
          prefix-icon-style="margin: 12rpx"
          type="text"
          border="bottom"
          placeholder="请输入登录账号"
        />
      </view>
      <view class="mt-33rpx">
        <u-input
          v-model="formData.graph"
          :prefix-icon="picCode"
          prefix-icon-style="margin: 12rpx"
          type="text"
          border="bottom"
          placeholder="请输入图形码"
        >
          <template #suffix>
            <u-image
              :show-menu-by-longpress="false"
              width="200rpx"
              height="72rpx"
              :src="captchaData.image"
              @click="handleClickReAcquire"
            />
          </template>
        </u-input>
      </view>
      <view class="mt-33rpx">
        <u-input
          v-model="formData.smsCode"
          :prefix-icon="msgCode"
          prefix-icon-style="margin: 12rpx"
          type="text"
          border="bottom"
          placeholder="请输入验证码"
        >
          <template #suffix>
            <view class="verification-code">
              <u-code
                ref="uCode"
                seconds="60"
                keep-running
                unique-key="forget_pwd"
                @start="verificationStatus = true"
                @end="verificationStatus = false"
                @change="handleVerificationChange"
              />
              <u-button
                type="primary"
                size="small"
                :disabled="verificationStatus"
                :text="verificationText"
                color="#386ee8"
                :throttle-time="600"
                @click="handleClickSendSms"
              />
            </view>
          </template>
        </u-input>
      </view>
      <view class="mt-33rpx">
        <u-input
          v-model="formData.pwd"
          :password="!pwdShow"
          :prefix-icon="pwd"
          prefix-icon-style="margin: 12rpx"
          border="bottom"
          placeholder="请设置您的密码"
        >
          <template #suffix>
            <view v-show="formData.pwd" @tap="pwdShow = !pwdShow">
              <u-icon v-if="pwdShow" name="eye-fill" size="36rpx" />
              <u-icon v-else name="eye-off" size="40rpx" />
            </view>
          </template>
        </u-input>
      </view>

      <view class="bottom-box">
        <u-button
          text="确认"
          color="#386ee8"
          :disabled="!submitBtnStatus"
          :throttle-time="600"
          @click="handleSubmitPwd"
        />
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component } from 'vue-property-decorator'

import { showToast } from '@/utils/helper/uniHelper'

import msgCode from './image/msgCode.png'
import phone from './image/phone.png'
import picCode from './image/picCode.png'
import pwd from './image/pwd.png'
import { getCaptcha, sendPhoneMsg, sendResetPassword } from './service'

@Component
export default class Forget extends Vue {
  // hook $refs
  $refs!: {
    uCode: any
  }

  msgCode = msgCode
  phone = phone
  picCode = picCode
  pwd = pwd

  public formData = {
    username: '',
    graph: '',
    smsCode: '',
    pwd: ''
  }

  get submitBtnStatus() {
    const { username, smsCode, pwd } = this.formData
    return username && smsCode && pwd
  }

  public captchaData: AnyObject = {}

  public pwdShow = false

  public verificationText = ''

  public verificationStatus = false

  onLoad() {
    this.handleClickReAcquire()
  }

  handleVerificationChange(text: string) {
    this.verificationText = text
  }

  handleClickSendSms() {
    if (!this.formData.username) {
      return showToast({ title: '请输入登录账号！' })
    }
    if (!this.formData.graph) {
      return showToast({ title: '请输入图形验证码！' })
    }

    sendPhoneMsg(
      this.formData.username,
      this.captchaData.key,
      this.formData.graph
    )
      .then(() => {
        this.$refs.uCode.start()
        return showToast({ title: '短信验证码下发成功！' })
      })
      .catch(() => {
        this.handleClickReAcquire()
      })
  }

  async handleClickReAcquire() {
    this.captchaData = await getCaptcha()
  }

  handleSubmitPwd() {
    const { username, smsCode, pwd } = this.formData
    if (pwd.length < 6)
      return showToast({ title: '请输入至少六位长度的密码！' })
    sendResetPassword(username, smsCode, pwd).then(() => {
      showToast({ title: '密码修改成功，请重新登录！' }).then(() =>
        uni.navigateBack({})
      )
    })
  }
}
</script>

<style lang="scss" scoped>
view {
  font-family: 'PingFang SC', serif, sans-serif;
}

.page {
  min-height: 100vh;
  background-color: #ffffff;
  padding: 60rpx 31rpx;
}

.title {
  font-size: 44rpx;
  color: $color-first-text;
  font-weight: bold;
  position: relative;
  z-index: 1;

  &:before {
    content: '';
    position: absolute;
    bottom: 5rpx;
    left: 0;
    height: 12rpx;
    width: 4em;
    background: $color-primary;
    z-index: -1;
  }
}

.desc {
  margin-top: $space-base;
  font-size: $font-size-xs;
  color: $color-third-text;
}

.form {
  margin-top: 72rpx;
}

.form-item {
  margin-top: 33rpx;
}

.verification-code {
  width: 200rpx;
  height: auto;
}
</style>
